<template>
  <div>
    <div class="breadcrumb-area pt-95 pb-95 bg-img" style="background-image:url(static/picture/banner-2.jpg);">
      <div class="container">
        <div class="breadcrumb-content text-center"><h2>Login / Register</h2>
          <ul>
            <li><a href="index.html">home</a></li>
            <li class="active">Login / Register</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="login-register-area pt-95 pb-100">
      <div class="container">
        <div class="row">
          <div class="col-lg-7 col-md-12 ml-auto mr-auto">
            <div class="login-register-wrapper">
              <div class="login-register-tab-list nav">
                <a class="active" data-toggle="tab" href="#lg1"><h4>login</h4>
                </a><a data-toggle="tab" href="#lg2"><h4>register</h4></a></div>
              <div class="tab-content">
                <div id="lg1" class="tab-pane active">
                  <div class="login-form-container">
                    <div class="login-register-form">

                      <form>
                        <input type="text" name="user-name" placeholder="Username"v-if="loginByUsername" v-model="username" @blur="checkUsername">
                        <a v-if="usernameNotExist" class="text-danger">Username Is Not Exist</a>
                        <input type="text" name="phone" placeholder="PhoneNumber"v-if="loginByPhone" v-model="phone" @blur="checkPhone">
                        <a v-if="phoneNotExist" class="text-danger">Phone has Not been Rigister</a>
                        <input type="password" name="user-password" placeholder="Password" v-if="loginByUsername"v-model="password">
                        <row>
                        <input type="text" name="user-password" style="width: 420px" placeholder="CacheCode" v-if="loginByPhone" v-model="cacheCode">

                           <button  class="btn btn-primary btn-lg" :disabled ="canGet" role="button" aria-pressed="true" @click="sendVerificate" v-if="loginByPhone">
                              <span>{{ btnText }}</span>
                            </button>

                        </row>
                        <div class="button-box">
                          <div class="login-toggle-btn">
                            <input type="checkbox">
                            <label>Remember me</label>
                            <a @click="logByPhone" v-if="loginByUsername">Login by Phone?</a>
                          <a @click="logByUsername" v-if="loginByPhone">Login by Username?</a>
                        </div>
                        </div>
                      </form>
                      <div class="button-box">
                      <button  @click="login" data-toggle="modal" data-target="#myModal">
                        <span>Login</span>
                      </button>
                      </div>
                    </div>
                  </div>
                </div>
                <div id="lg2" class="tab-pane">
                  <div class="login-form-container">
<!--                    <div class="login-register-form">-->

                      <form>
                        <input type="text" id="username" placeholder="Username" v-model="username" @blur="checkUsername">
                        <a v-if="usernameExist" class="text-danger">Has Already registered</a>
                        <input type="password" name="user-password" placeholder="Password" v-model="password">
                        <input id="email" placeholder="Email" type="email" v-model="email">
                        <a v-if="emailExist" class="text-danger">Has Already registered</a>

                      </form>
                    <div class="button-box">
                      <button @click="onRegister" data-toggle="modal" data-target="#myModal">
                        <span>Register</span>
                      </button>
                    </div>
<!--                    </div>-->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="modal fade" id="myModal" v-if="messageBox" >
      <div class="modal-dialog">
        <div class="modal-content">

          <!-- 模态框头部 -->
          <div class="modal-header">
            <h4 class="modal-title">Attention</h4>
            <button type="button" class="close" data-dismiss="modal">&times;</button>
          </div>

          <!-- 模态框主体 -->
          <div class="modal-body">
            <h3>{{message}}</h3>
          </div>

          <!-- 模态框底部 -->
          <div class="modal-footer">
            <router-link to="/user/myAccount">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" v-if="closebtn">close</button>
          </router-link>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>

import user from "../../../static/js/pet/user"
export default {
  ...user
}
</script>

<style scoped>
@import "../../../static/css/bootstrap.min.css";
@import "../../../static/css/animate.css";
@import "../../../static/css/simple-line-icons.css";
@import "../../../static/css/themify-icons.css";
@import "../../../static/css/owl.carousel.min.css";
@import "../../../static/css/slick.css";
@import "../../../static/css/meanmenu.min.css";
@import "../../../static/css/style2.css";

@import "../../../static/css/responsive.css";
</style>
